<template>
    <view class="select_jx_input_cp">
        <template v-if="model=='input'">
            <u-input 
                v-model="mydata" 
                placeholder="请选择剂型"/>
            <u-icon 
                name="arrow-down-fill"
                @click="show = true">
            </u-icon>
        </template>
        <template v-else>
            <u-input
                v-model="mydata" 
                type="select" 
                @click="show = true"
                placeholder="请选择剂型"/>
        </template>
        <u-select 
            v-model="show" 
            :list="mydataList" 
            @confirm="confirm">
        </u-select>
    </view>
</template>

<script>
//剂型选择input组件
export default {
    name:"SelectJxInputCp",
    props:{
        model:{  //只有两种模式，input主输入，可以选择。select主选择，只能选择
            type:String,
            default:'input', 
        },
        value:{
            type:String,
            default:'',
        },
    },
    data() {
        return {
            show: false,
            mydataList: [
                {
                    value: '1',
                    label: '片剂'
                },
            ],
        }
    },
    computed:{
        mydata:{ //剂型
            get(){
                return this.value;
            },
            set(value){
                this.$emit('input',value);
            },
        },
    },
    methods:{
        confirm(e) { //确定按钮点击事件
            this.mydata = e[0].label;
        }
    },
}
</script>

<style lang="scss" scoped>
.select_jx_input_cp {
    text-align: center;
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 100%;
    /deep/.u-input{
        width: 100%;
        margin-right: 35rpx;
    }
    .u-icon{
        margin-left: 35rpx;
    }
    .u-select{
        position: absolute;
    }
}
</style>
